<template>
  <el-dialog
    class="department-site-dialog"
    title="部门管辖区站"
    :visible.sync="dialogFormVisible"
    :close-on-click-modal="false"
    width="90%"
    :append-to-body="true"
    @close="$emit('closeSite')">
    <div class="filter-container" style="padding-bottom:10px;">
      <el-form ref="form" class="query-condition" @submit.native.prevent>
        <el-button
          v-permission-button="'ITPS-ADD'"
          class="filter-item icon-green"
          size="mini"
          type="success"
          icon="el-icon-plus"
          @click="addForm">
          增加管辖区间站场
        </el-button>
      </el-form>
    </div>
    <div ref="main">
      <el-table
        v-if="height > 0"
        ref="multipleTable"
        v-loading="listLoading"
        :data="tableData"
        border
        :height="height"
        tooltip-effect="dark"
        style="width: 100%">
        <el-table-column
          label="序号"
          align="center"
          type="index"
          width="50" />
        <el-table-column show-overflow-tooltip label="所属线路">
          <template slot-scope="{row}">{{ row.lineAttr.lineName }}</template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="区间站场">
          <template slot-scope="{row}">{{ row.siteAttr.siteName }}</template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="起始公里标">
          <template slot-scope="{row}">{{ formatRoad(row.beginRoad) }}</template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="截止公里标">
          <template slot-scope="{row}">{{ formatRoad(row.endRoad) }}</template>
        </el-table-column>
        <el-table-column prop="operateKm" show-overflow-tooltip label="管辖里程" />
        <el-table-column prop="memo" show-overflow-tooltip label="备注信息" />
        <el-table-column
          label="操作"
          fixed="right"
          align="center"
          width="90"
          class-name="small-padding fixed-width">
          <template slot-scope="{ row, $index }">
            <el-button
              size="mini"
              class="td-btn-operation"
              @click="cancelSite(row, $index)">取消管辖</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-box">
        <pagination
          :total="total"
          :page.sync="listQuery.page"
          :size.sync="listQuery.size"
          @pagination="getList" />
      </div>
    </div>
    <add-site ref="addSite" :dept-attr="deptAttr" @addSite="addSite" />
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('closeSite');dialogFormVisible = false;">
        取消
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getSiteByDeptId, deleteSiteById } from '@/api/dsc/system/department'
import AddSite from './SiteAdd'
export default {
  name: 'DeptSystem',
  components: {
    AddSite
  },
  props: {
    deptAttr: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      height: 280, // table高度
      tableData: [], // 表格数据
      listQuery: {
        // 搜索条件
        deptId: '',
        page: 1,
        size: 20
      },
      listLoading: false,
      total: 0,
      dialogFormVisible: false
    }
  },
  watch: {
    dialogFormVisible(val) {
      if (val) {
        this.listQuery.deptId = this.deptAttr.deptId
        this.getList()
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 查询列表
    getList() {
      this.listLoading = true
      getSiteByDeptId(this.listQuery)
        .then(response => {
          this.tableData = response.data.records
          this.total = response.data.total
          // Just to simulate the time of the request
          setTimeout(() => {
            this.listLoading = false
          }, 0 * 1000)
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    // 增加管辖区间站场回调
    addSite(data) {
      this.total++
      this.tableData.unshift(data)
    },
    // 增加管辖区间站场
    addForm() {
      this.$refs.addSite.dialogFormVisible = true
    },
    // 取消管辖
    cancelSite(row, $index) {
      this.confirmBox('确定删除?').then(() => {
        deleteSiteById(row.id).then(response => {
          this.notifiySuccess('删除成功!')
          // this.tableData.splice($index, 1)
          // this.total--
          this.getList()
        })
      })
    }
  }
}
</script>
<style lang="scss">
.department-site-dialog{
  .el-dialog__body{
    padding: 20px 0 0;
  }
}
</style>
